<template>
  <div class="search">
    <div class="frame">
        <input type="text" :placeholder="lang.helpInputKeyword" v-model="keywords" @keyup.13="searchKeywords($event)">
        <img src="./images/magnifier.png" @click="searchKeywords()" />
    </div>
    <span class="search-btn" v-text="lang.helpSearchBtn" @click="searchKeywords()"></span>

    <!-- 提示弹窗 -->
    <SwModal :isShow.sync="isEmpty" :isShowBg="true" :onClosed="onClosed" modalClass="helptips">
      <div class="tipPop">
        <div class="title">
          <span v-text="lang['point out']"></span>
          <img src="./images/close.png" alt="close-btn" class="close"  @click="isEmpty=false">
        </div>
        <div class="text" v-text="lang.helpInputKeyword"></div>
        <span class="btn" v-text="lang.iGotIt" @click="isEmpty=false"></span>
      </div>
    </SwModal>
  </div>
</template>

<script>
import commonMixins from '@/mixins/common.js'
import SwModal from '@/components/SwModal'
export default {
  mixins: [commonMixins],
  props: ['searchKey'],
  data () {
    return {
      keywords: localStorage.keywords || '',
      isEmpty: false
    }
  },
  components: {
    SwModal
  },
  watch: {

  },
  methods: {
    // 查询关键字
    searchKeywords () {
      if (this.keywords === '') {
        this.isEmpty = true
        return
      }
      localStorage.keywords = this.keywords
      this.$router.push({path: '/help/searchResult', query: {keywords: this.keywords}})
    },
    onClosed () {

    }
  },
  mounted () {
    this.keywords = this.searchKey || this.$route.query.keywords  || localStorage.keywords
  },
  beforeDestroy () {
    localStorage.keywords = ''
  }
}
</script>

<style lang="less" scoped>
.search{
    width: 100%;
    height: 150px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-image: url('./images/secrch-bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .frame {
        position: relative;
        margin-right: 20px;

        input {
            width: 500px;
            height: 36px;
            line-height: 36px;
            padding: 0 46px 0 20px;
            border-radius: 100px;
            background: none;
            border: 1px solid #fff;
            box-sizing: border-box;
            color: #fff;
        }

        img {
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
        }
    }
    .search-btn {
      height: 36px;
      line-height: 36px;
      min-width: 80px;
      padding: 0 10px;
      border-radius: 100px;
      color: #fff;
      text-align: center;
      box-sizing: border-box;
      background-color: #3782FF;
      cursor: pointer;
    }
}

.modal.helptips {
  .tipPop {
    width: 480px;
    height: 180px;
    text-align: center;
    color: #fff;
    position: relative;
    height: 180px;

    .title {
      padding: 14px 0;
      position: relative;

      .btn {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .text {
      padding-bottom: 40px;
    }
    .btn {
      cursor: pointer;
    }
  }
}
</style>
